<template>
    <li id="box">
        <template>
            <slot name="songName"></slot>
            <slot name="singer"></slot>
        </template>
        <i class="iconfont icon-Play" title="播放" @click="handleClick(data_index)"></i>
    </li>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props: {
        song: {
            type: Object
        },
        data_index: {
            type: Number
        },
        data_songList: {
            type: Array
        }
    },
    methods: {
        handleClick(index) {
            this.$store.commit('changeCurrentSongList', this.data_songList);
            let currentSong = this.$store.state.currentSongList[index];
            this.$store.commit('togglePlay', true);
            this.$store.commit('initCurrentSongIndex', index);
            this.$store.commit('changeCurrentSong', currentSong);
        }
    }
}
</script>

<style lang="scss" scoped>
    #box {
        position: relative;
        height: 40px;
        padding-left: 15px;
        line-height: 40px;
        cursor: default;

        strong {
            margin-right: 10px;
            font-size: 1.4rem;
        }

        span {
            color: #ccc;
            font-size: 0.7rem;
        }

        i {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            font-size: 1.4rem;
            cursor: pointer;
        }

        &:nth-child(odd) {
            background-color: rgba($color: #ddd, $alpha: 0.3);
        }
    }
</style>